<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户</title>
    <link rel="stylesheet" href="../css/user.css">
</head>

<body>
    <div class="all">
        <div class="functions">
            <div class="sellstatus" onclick="toSell()">销售情况</div>
        </div>
        <div class="user">
            <img src="../images/nat.png" alt="#">
            <h1 class="username"></h1>
            <h4 class="num"></h4>
            <h4 class="discount"></h4>
            <button class="set" onclick="SetPwd()">修改密码</button>
            <button class="set" onclick="logOut()">退出登录</button>
        </div>
        <div class="search">
            <select class="classify">
                <option value="classify">图书分类</option>
                <option value="publish">出版社</option>
                <option value="bookName">书名</option>
                <option value="auth">作者</option>
            </select>
            <input type="text" placeholder="请输入" class="inp" />
            <button onclick="search()">搜索</button>
        </div>

        <div class="books" style="display: none;">
            <table cellspacing="0">
                <thead>
                    <tr>
                        <th>图书编号</th>
                        <th>书名</th>
                        <th>作者</th>
                        <th>类别</th>
                        <th>价格</th>
                        <th>出版社</th>
                        <th>库存</th>
                    </tr>
                </thead>
                <tbody class="item">

                </tbody>
            </table>
        </div>

    </div>
</body>
<script>
    // --------------获取登录信息---------------------------------
    var username = window.sessionStorage.getItem('username');
    var password = window.sessionStorage.getItem('password');
    var httpRequest = new XMLHttpRequest(); //第一步：建立所需的对象
    httpRequest.open('POST', 'http://192.168.0.108:5000/login', true);
    httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //第二步：打开连接  将请求参数写在url中  
    httpRequest.send("username=" + username + "&password=" + password);
    httpRequest.onreadystatechange = () => {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            var data = JSON.parse(httpRequest.responseText);
            console.log(data);
            var discount = 10 - data[0].vip;
            document.querySelector('.username').innerHTML = data[0].username;
            document.querySelector('.num').innerHTML = 'vip等级:' + data[0].vip;
            document.querySelector('.discount').innerHTML = '折扣:' + discount + '折';
        }
    }
    // ------------------点击搜索-----------------------------
    function search() {
        //1:拿到select对象
        var myselect = document.querySelector('.classify')
        console.log(myselect);
        // 2:拿到选中项的索引
        var index = myselect.selectedIndex;
        // 3:拿到选中项options的value
        var value = myselect.options[index].value;
        console.log(index);
        console.log(value);
        var data = document.querySelector('.inp').value;
        console.log(data);
        // 清空子元素
        var div = document.querySelector('.item');
        while (div.hasChildNodes()) //当div下还存在子节点时 循环继续
        {
            div.removeChild(div.firstChild);
        }

        var httpRequest1 = new XMLHttpRequest(); //第一步：建立所需的对象
        httpRequest1.open('POST', 'http://192.168.0.108:5000/book/' + value, true);
        httpRequest1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        httpRequest1.send("data=" + data); //第二步：打开连接  将请求参数写在url中  ps:"./Ptest.php?name=test&nameone=testone"
        httpRequest1.onreadystatechange = () => {
            if (httpRequest1.readyState == 4 && httpRequest1.status == 200) {
                var data = JSON.parse(httpRequest1.responseText);
                console.log(data);
                if (data.length != 0) {
                    document.querySelector('.books').style.display = 'block'
                    let bookList = data.map((item, index) => {
                        return Object.assign({}, { 'id': item.id, 'bookname': item.name, 'auth': item.auth, 'classify': item.classify, 'price': item.price, 'publish': item.publish, 'count': item.count })
                    })
                    console.log(bookList);
                    // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行
                    var tbody = document.querySelector('.item');
                    for (var i = 0; i < bookList.length; i++) { // 外面的for循环管行 tr
                        // 1. 创建 tr行
                        var tr = document.createElement('tr');
                        tbody.appendChild(tr);
                        // 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数  for循环遍历对象 datas[i]
                        for (var k in bookList[i]) { // 里面的for循环管列 td
                            // 创建单元格 
                            var td = document.createElement('td');
                            // 把对象里面的属性值 datas[i][k] 给 td
                            // console.log(datas[i][k]);
                            td.innerHTML = bookList[i][k];
                            tr.appendChild(td);
                        }
                    }
                }
            }
        }
    }

    // ------------------修改密码-----------------------------
    function SetPwd() {
        location.replace("setPwd.html");
    }
    // -----------------退出登录------------------------------
    function logOut() {
        location.replace("index.html");
    }
    // -------------------查看销售情况-------------------------
    function toSell() {
        location.replace("sellStatus.html");
    }
</script>

</html>